<template>
  <div class="playedu-main-body">
    <div class="float-left j-b-flex mb-24">
      <div class="d-flex">
        <a-button
          type="primary"
          class="mr-16"
          @click="createVisible = true"
        >
          <template #icon>
            <PlusOutlined />
          </template>
          新建角色
        </a-button>
      </div>
      <div class="d-flex"></div>
    </div>

    <div class="float-left">
      <a-table
        :columns="columns"
        :data-source="list"
        :loading="loading"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <!-- 角色名 -->
          <template v-if="column.dataIndex === 'name'">
            <span>{{ record.name }}</span>
          </template>

          <!-- 时间 -->
          <template v-if="column.dataIndex === 'created_at'">
            <span>{{ record.created_at ? dateFormat(record.created_at) : '' }}</span>
          </template>

          <!-- 操作 -->
          <template v-if="column.key === 'action'">
            <a-space size="small">
              <PerButton
                type="link"
                text="编辑"
                class="b-link c-red"
                p="admin-role"
                @click="() => { cid = record.id; updateVisible = true }"
              />
              <div class="form-column"></div>
              <PerButton
                type="link"
                text="删除"
                class="b-link c-red"
                p="admin-role"
                @click="() => delUser(record.id)"
              />
            </a-space>
          </template>
        </template>
      </a-table>

      <!-- 新建角色 -->
      <SystemAdminrolesCreate
        :open="createVisible"
        @cancel="handleCreateCancel"
      />

      <!-- 编辑角色 -->
      <SystemAdminrolesUpdate
        :id="cid"
        :open="updateVisible"
        @cancel="handleUpdateCancel"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, h } from "vue";
import { Modal, message } from "ant-design-vue";
import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons-vue";
import { adminRole } from "@/api";
import { dateFormat } from "@/utils";
import PerButton from "@/components/PerButton.vue";
import SystemAdminrolesCreate from "./compenents/create.vue";
import SystemAdminrolesUpdate from "./compenents/update.vue";

interface DataType {
  id: number;
  name: string;
  created_at: string;
}

const list = ref<DataType[]>([]);
const loading = ref(true);
const refresh = ref(false);
const createVisible = ref(false);
const updateVisible = ref(false);
const cid = ref<number>(0);

const columns = [
  { title: "角色名", dataIndex: "name" },
  { title: "时间", dataIndex: "created_at" },
  { title: "操作", key: "action", fixed: "right", width: 160 },
];

// 获取数据
const getData = () => {
  loading.value = true;
  adminRole.adminRoleList().then((res: any) => {
    list.value = res.data;
    loading.value = false;
  });
};

watch(refresh, () => {
  getData();
}, { immediate: true });

const resetData = () => {
  list.value = [];
  refresh.value = !refresh.value;
};

// 删除角色
const delUser = (id: number) => {
  if (id === 0) return;
  Modal.confirm({
    title: "操作确认",
    icon: h(ExclamationCircleFilled),
    content: "确认删除此角色？",
    centered: true,
    okText: "确认",
    cancelText: "取消",
    onOk() {
      return adminRole.destroyAdminRole(id).then(() => {
        message.success("操作成功");
        resetData();
      });
    },
  });
};

// 关闭弹窗
const handleCreateCancel = () => {
  createVisible.value = false;
  resetData();
};
const handleUpdateCancel = () => {
  updateVisible.value = false;
  resetData();
};
</script>
